<template>
	<view>
		<view>
			<view class='header'>
				<image src='../../static/img/wx_login.png'></image>
			</view>
			<view class='content'>
				<view>申请获取以下权限</view>
				<text>获得你的公开信息(昵称，头像、地区等)</text>
			</view>

			<button class='bottom' type='primary' open-type="getUserInfo" withCredentials="true" lang="zh_CN" @getuserinfo="getUserInfo">
				授权登录
			</button>

		</view>
		<tui-toast ref="toast"></tui-toast>
		<u-no-network tips="哎呀，网络信号丢失"></u-no-network>
		<failTimeout v-show="failTimeout"></failTimeout>

		<u-popup class="phone" v-model="getPhoneNumber_show" mode="bottom" height="100%">
			<view class='header'>
				<image src='../../static/img/wx_phone.png'></image>
			</view>
			<view class='content'>
				<view>申请获取以下权限</view>
				<text>获得你的手机号码</text>
			</view>
			
			<button class='bottom' type='primary' open-type="getPhoneNumber" withCredentials="true" lang="zh_CN" @getphonenumber="getPhoneNumber">
				授权
			</button>
		</u-popup>
	</view>
</template>

<script>
	import UmsMemberController from '../../api/UmsMemberController.js'
	import Cookies from '../../utils/Cookies.js'
	export default {
		data() {
			return {
				failTimeout: false,
				getPhoneNumber_show: false,
				login_code:null,
				successKey:null,
			}
		},
		onLoad() {

		},
		methods: {

			getPhoneNumber(e) {

				console.log("onGetPhoneNumber", e);
				console.log(e.detail.errMsg);
				console.log(e.detail.iv);
				console.log(e.detail.encryptedData);
				UmsMemberController.addPhone(null, e.detail.encryptedData, e.detail.iv,this.successKey).then(res => {
					if (res.data.code == 200) {
						this.$refs.toast.show({
							title: "登录成功",
							imgUrl: "/static/img/toast/check-circle.png",
							icon: true
						})
						setTimeout(()=>{
							uni.navigateBack();
						},1000)
						
					}
					
				}).catch(err => {
					if (err.errMsg == 'request:fail timeout') {
						this.failTimeout = true
					}
				})

			},
			login() {
				this.getPhoneNumber_show = true;
			},
			getUserInfo() {
				 uni.login({
					provider: 'weixin',
					success: res_login => {
						uni.getUserInfo({
							success: info => {
								 UmsMemberController.wxLogin(res_login.code, info.encryptedData, info.iv).then(res => {
									if (res.data.code == 200) {
										uni.setStorageSync('user', info);
										Cookies.setUserToken(res.data.data.token, res.data.data.tokenHead)
										this.successKey=res.data.data.successKey
										if(res.data.data.phone==''||res.data.data.phone==null||res.data.data.phone=='undefined'){
											this.getPhoneNumber_show = true;
										}else{
											this.$refs.toast.show({
												title: "登录成功",
												imgUrl: "/static/img/toast/check-circle.png",
												icon: true
											})
											setTimeout(()=>{
												uni.navigateBack();
											},1000)
										}
										
									}else if(res.data.code==500){
										this.$refs.toast.show({
											title: "您的账号已被禁用",
											imgUrl: "/static/img/toast/fail-circle.png",
											icon: true
										})
									}
								}).catch(err => {
									if (err.errMsg == 'request:fail timeout') {
										this.failTimeout = true
									}
									
								})

							}
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
	.phone {

	}

	.phone .text {
		margin-top: 40rpx;
		padding: 40rpx;
	}

	.phone .but {
		width: 100%;
		display: flex;
		box-sizing: border-box;
	}

	.phone .u-button {
		width: 50%;
		margin: 20rpx;
	}

	.header {
		margin: 90rpx 0 90rpx 50rpx;
		border-bottom: 1px solid #ccc;
		text-align: center;
		width: 650rpx;
		height: 300rpx;
		line-height: 450rpx;
	}

	.header image {
		width: 200rpx;
		height: 200rpx;
	}

	.content {
		margin-left: 50rpx;
		margin-bottom: 90rpx;
	}

	.content text {
		display: block;
		color: #9d9d9d;
		margin-top: 40rpx;
	}

	.bottom {
		border-radius: 80rpx;
		margin: 70rpx 50rpx;
		font-size: 35rpx;
	}
</style>
